/* 
rcc: 定义类组件      react class component
rfc: 定义函数组件   react function component
*/

/* 
类组件事件回调函数this的问题
  默认事件回调函数中的this不是组件对象, 而是undefined  => 事件回调函数内部是直接调用的,当前是严格模式

*/

import React, { Component } from 'react'

export default class StateTest extends Component {

  constructor () {
    super()
    // this. handleCLick2 = () => {
    //   console.log(this)
    //   this.setState({
    //     count: this.state.count + 3
    //   })
    // }
  }

  state = {
    count: 1
  }

  handleCLick () {
    console.log(this)
    this.setState({
      count: this.state.count + 2
    })
  }

  // 本质是在构造器中运行, 箭头函数没有自己的this, 使用外层构造器的this, 也就是组件对象
  handleCLick2 = (e) => {
    console.log(this)
    this.setState({
      count: this.state.count + 3
    })
  }

  render() {
    console.log('render', this)
    // 2. 读取state数据显示
    const count = this.state.count
    return (
      <div>
        <h3>点击次数: {count}</h3>
        <button onClick={this.handleCLick}>有问题</button><br/>
        {/* 方式一: 通过bind来绑定render中的this */}
        <button onClick={this.handleCLick.bind(this)}>解决办法1: 通过bind绑定this</button><br/>
        {/* 方式一:  在外层包裹函数,自己来调用使用render中的this */}
        <button onClick={(e) => this.handleCLick(e, 'abc')}>解决办法2: 在外层包裹函数,自己来调用</button><br/>
        {/* 方式一:  将处理函数直接定义箭头函数 */}
        <button onClick={this.handleCLick2}>解决办法3: 将处理函数定义为箭头函数</button><br/>
      </div>
    )
  }
}

/* 
选择的问题
1. 一般使用箭头函数
2. 当需要传递自己的参数时, 选择用包裹箭头函数
*/
